<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960_table.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'960grid/960_extra.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'dialog.css'?>">

<div id="chart-area" style="height: 400px">
    <image id="chart-image" src="<?php echo root_url()."testing_out.php"?>"/>
</div>

<div id="applicants-area">
    <div class="tab-titles">
        <div class="container_12">
            <div class="grid_1">&nbsp;</div>
            <div id="pending-tab" class="grid_3 tab-entities">Pending</div>;
            <div id="accept-tab" class="grid_3 tab-entities">Accepted</div>
        </div>
    </div>
    <!-- Header Table -->
    <div id="applicants-table" style="width:100%; margin-bottom: 20px;">
        <div class="container_12 header">
            <div class="grid_1"> &nbsp;</div>
            <div class="grid_3">Email</div>
            <div class="grid_3">Name</div>
            <div class="grid_2"><?php if($Type=='Pending') 
                echo "Apply Date";
                else{
                echo "Accept Date";
                }
?></div>
        </div>

        <?php if(count($Post['Applicants']) == 0){ ?>
        <div class="container_12 row">
            <div class="grid_12" style="text-align:"> There is no applicants in this post now.</div>
        </div>
        <?php }else{ ?>
        <?php foreach($Post['Applicants'] as $Applicant):?> 
        <div class="container_12 row" UserID="<?php echo $Applicant['UserGroup3ID']?>">
            <div class="grid_1"> <input value="<?php echo $Applicant['PostApplyID'];?>" class="applicant-checkbox" type="checkbox"/></div>
            <a href="<?php echo site_url().'/user_group2/posts/apply_show/'.$Post['PostID'].'/'.urlencode($Applicant['UserGroup3ID'])?>">
                <div class="grid_3"><?php echo $Applicant['RelUserEmail']?></div>
                <div class="grid_3"><?php echo $Applicant['UserFullname']?></div>
                <div class="grid_2"><?php echo $Applicant['ApplyDate']?></div>
                <div class="hide-in-row">
                    <div class="content" style="background-image: url('<?php echo $Applicant['AvatarLink']?>');">
        <!--                <image src="" style="float:left"></image>-->
                        <?php 
                        if($Applicant['IntroductionContent']){
                            echo $Applicant['IntroductionContent']; 
                        }else{
                            echo "No introduction";
                        }
                        ?>
                    </div>
                </div>
            </a>
        </div>

        <?php endforeach; } ?>
        </div>
    
        <?php if($Type=='Pending'):?>
        <div class="container_12">
            <div class="grid_1">
                &nbsp;
            </div>
            <div class="grid_2">
                <div id="accept-btn" class="dynamic-btn">Accept</div>
            </div>
        </div>
        <?php endif; ?>
    
    
</div>

<script>
    $(document).ready(function(){
        //Which tab is clicked
        <?php if($Type=='Pending'){?>
            $('#pending-tab').attr('clicked','1');
        <?php }else{?>
            $('#accept-tab').attr('clicked','1');
        <?php } ?>
        
        <?php if($Type=='Pending'){?>
        var ListID = [];
        
        $("div[UserID='"+GET['NotiUsID']+"']").attr('IsHightLight','1');     
        /*Pop up dialog*/
        var popup = function(){
            $("section#body").addClass("fadeOut");
            $(".dialog").addClass("show");
        }
        
        var buttonHandlers = function(){
            $("#ok-button").on("click",function(){
                $("section#body").removeClass("fadeOut");
                $(".dialog").removeClass("show");
                Content = $("#dialog-content").val();
                $.ajax({
                    url: '<?php echo site_url().'/user_group2/posts/accept_applicants'?>',
                    type: 'post',
                    data: {ListID: ListID, Content: Content},
                    async: false,
                    success: function(data){
                        if(data == '1' || data==1)
                            window.location.href = "<?php echo site_url().'/user_group2/posts/'.$Post['PostID'].'?section=post-applicants'?>"
                    } 
                });
            });
            
            $("#cancel-button").on("click",function(){
                $("section#body").removeClass("fadeOut");
                $(".dialog").removeClass("show");
            });
        }
        buttonHandlers();

        $('#accept-btn').on('click', function(){
            ListID = [];
            $('.applicant-checkbox').each(function(){
                if($(this).prop('checked')){
                    ListID.push($(this).val());
                }
            });
            if(ListID.length == 0){
                alert("Please choose at least 1 applicant");
                return;
            }
            popup();
        });
        
        <?php }else{?>

        <?php } ?>
            
        
        $("input").on("click",function(e){
            e.stopPropagation();  
        });        
        var Array_Dates = <?php echo json_encode($Post['Date_Applies']['Array_Dates']); ?>;
        var Array_Num = <?php echo json_encode($Post['Date_Applies']['Array_Num']); ?>;
        $.ajax({
            url : "<?php echo root_url().'create_chart.php'?>",
            type: 'post',
            async: false,
            data: { Array_Dates : Array_Dates, Array_Num : Array_Num},
            success: function(data){
                $("#chart-image").attr('src','<?php echo image_url().'chart.png?id'?>' + Math.random());
            } 
        });

        $('#pending-tab').on('click',function(){
            $.get("<?php echo site_url().'/user_group2/posts/manage_post_applicants/'.$Post['PostID'].'/Pending';?>", function(data){
                $(".content-container").html(data);
            });
        });
        
        $('#accept-tab').on('click',function(){     
            $.get("<?php echo site_url().'/user_group2/posts/manage_post_applicants/'.$Post['PostID'].'/Accept';?>", function(data){
                $(".content-container").html(data);
            });
        });
    });


        
    
    
</script>